<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Mo.js - 简洁高效，容易扩展 - JavaScript Library</title>
<script src="lib/mo.js" type="text/javascript" charset="utf-8"></script>
<script src="res/static.js" type="text/javascript" charset="utf-8"></script>
<link href="res/layout.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>

    <div id="wrapper">

        <h1 id="mo-js"> Mo<span>.js</span> </h1>
        <h4 id="build"> Mo.js - 高效 JavaScript 函数库 </h4>
        
        <div id="search">
            <form action="search.html" method="get">
                <input type="text" name="q" value="搜索..." />
            </form>
        </div>

        <div id="naver">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="browser.html">Browser</a></li>
                <li><a href="selector.html">Selector</a></li>
                <!--li><a href="ajax.html">Ajax</a></li-->
                <!--li><a href="drag.html">Drag</a></li-->
                <li><a href="event.html">Event</a></li>
                <li><a href="date.html">Date</a></li>
                <li><a href="string.html">String</a></li>
                <!--li><a href="number.html">Number</a></li-->
                <li><a href="array.html">Array</a></li>
                <li><a href="cookie.html">Cookie</a></li>
                <li><a href="validate.html">Validate</a></li>
                <!--li><a href="hash.html">Hash</a></li-->
                <li><a href="method.html">Method</a></li>
                <li><a href="toolkit.html">Toolkit</a></li>
                <li><a href="api.html">API</a></li>
            </ul>
        </div>


        <dl id="entry">

            <dt> Mo.$( id ) </dt>
            <dd>

                <p>等同于 getElementById() 方法，可返回对拥有指定 ID 的第一个对象的引用</p>

                <blockquote>
                    <p> <strong>id</strong>  元素 ID ，字符串</p>
                </blockquote>
                
                <pre>Mo.$( "test" ).innerHTML;</pre>
            </dd>
            
            <dt> Mo.ready( func ) </dt>
            <dd>

                <p>页面 DOM 加载完毕后执行函数。</p>

                <blockquote>
                    <p> <strong>func</strong>  函数名称或匿名函数</p>
                </blockquote>
                
                <p>func 可接受参数</p>

                <blockquote>
                    <p> <strong>time</strong>  加载 DOM 耗时，单位：毫秒，此值为估算值</p>
                </blockquote>
                
                <pre>Mo.ready( function( time ){ alert( '加载 DOM 花了' + time + '毫秒' ); } );</pre>

                <p id="ready"></p>
            </dd>
            
            <dt> Mo.reader( func ) </dt>
            <dd>

                <p>页面完全加载完毕后执行函数。</p>

                <blockquote>
                    <p> <strong>func</strong>  函数名称或匿名函数</p>
                </blockquote>
                
                <p>func 可接受参数</p>

                <blockquote>
                    <p> <strong>time</strong>  加载页面耗时，单位：毫秒，此值为估算值</p>
                </blockquote>
                
                <pre>Mo.reader( function( time ){ alert( '加载页面花了' + time + '毫秒' ); } );</pre>

                <p id="reader">
                    <img src="res/images/summer.jpg" />
                </p>
                
            </dd>

            <dt> Mo.resize( func ) </dt>
            <dd>
            
                <p>页面尺寸变化后执行函数。</p>

                <blockquote>
                    <p> <strong>func</strong>  函数名称或匿名函数</p>
                </blockquote>
                            
                <pre>Mo.resize( function(){ alert(''); } );</pre>
                
                <p id="resize"></p>
                
            </dd>
            
            <dt> Mo.Template( id, data ) </dt>
            <dd>

                <p>微型 JavaScript 模板引擎，它拥有缓存机制、支持使用原生的 JS 语法进行逻辑判断</p>

                <blockquote>
                    <p> <strong>id</strong>  元素 ID ，字符串</p>
                    <p> <strong>data</strong>  数据集，JSON</p>
                </blockquote>
                
                <pre>
&lt;script type="text/html" id="user_tmpl"&gt;
        链接总数：&lt;%=users.length%&gt;
        &lt;% for ( var i = 0; i &lt; users.length; i++ ) { %&gt;
        &lt;li&gt;&lt;a href="&lt;%=users[i].url%&gt;">&lt;%=users[i].name%&gt;&lt;/a&gt; &lt;%=(  i == users.length - 1 ? '*' : '' ) %&gt;&lt;/li&gt;
        &lt;% } %&gt;
&lt;/script&gt;

&lt;div id="results"&gt;&lt;/div&gt;

&lt;script&gt;	
        var dataObject = { users : [ { url : 'http://www.veryide.com/projects/mojs/', name : 'Mo.js' }, { url : 'http://www.veryide.com', name : 'VeryIDE' } ] }	
        var results = document.getElementById("results");
        results.innerHTML = Mo.Template("user_tmpl", dataObject); 
&lt;/script&gt;</pre>
            </dd>

            <dt> Mo.random( length[, upper, lower, number] ) </dt>
            <dd>

                <p>产生一个指定长度的随机字符串，并可以控制它的组成方式（大小写，数字）。</p>

                <blockquote>
                    <p> <strong>length</strong>  字符串长度</p>
                    <p> <strong>upper</strong>  是否允许大写字母，默认允许</p>
                    <p> <strong>lower</strong>  是否允许小写字母，默认允许</p>
                    <p> <strong>number</strong>  是否允许数字，默认允许</p>
                </blockquote>
                
                <pre>Mo.random(40,true,true,true);</pre>

                <p><button type="button" id="random">测试</button> <span id="random_box"></span> </p>

            </dd>

            <dt> Mo.between( min, max ) </dt>
            <dd>

                <p>产生一个指定范围的随机数值。</p>

                <blockquote>
                    <p> <strong>min</strong>  最小整数值</p>
                    <p> <strong>max</strong>  最大整数值</p>
                </blockquote>
                
                <pre>Mo.between(40,100);</pre>

                <p><button type="button" id="between">测试</button> <span id="between_box"></span> </p>

            </dd>

            <dt> Mo.get( key[, url] ) </dt>
            <dd>				

                <p>
                    提取 URL 中的指定参数的值。
                </p>

                <blockquote>
                    <p> <strong>key</strong>  参数名称</p>
                    <p> <strong>url</strong>  URL 字符串，默认为当前 location.href</p>
                </blockquote>

                <pre>Mo.get("key");</pre>

                <table border="0"cellpadding="0" cellspacing="1">
                    <thead>
                    <tr>
                        <td width="50%">原始：</td>
                        <td>结果：</td>
                    </tr>
                    </thead>
                    <tr>
                        <td>
                            <textarea id="url_source" rows="4" style="width:96%;">http://www.veryide.com/?key=abc</textarea>
                        </td>
                        <td>
                            <textarea id="url_result" rows="4" style="width:96%;"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">                        					
                            <button type="button" id="url_action">测试</button>
                        </td>
                    </tr>
                </table>

            </dd>

            <dt> Mo.url( url ) </dt>
            <dd>
                <p>解析 URL 资源链接。</p>

                <blockquote>
                    <p> <strong>url</strong>  URL 字符串</p>
                </blockquote>
                
                <pre>Mo.url("http://abc.com:8080/dir/index.html?id=255&m=hello#top");</pre>

                <p>
                    返回以下属性值：
                </p>
                
                <table border="0"cellpadding="0" cellspacing="1">
                    <thead>
                    <tr>
                        <td width="25%">属性：</td>
                        <td width="25%">值：</td>
                        <td width="25%">属性：</td>
                        <td width="25%">值：</td>
                    </tr>
                    </thead>
                    <tr>
                        <td>
                            .file</td>
                        <td>index.html</td>
                        <td>.hash</td>
                      <td>top</td>
                    </tr>
                    <tr>
                        <td>
                      .host</td>
                        <td>abc.com</td>
                        <td>.query</td>
                      <td>?id=255&amp;m=hello</td>
                    </tr>
                    <tr>
                        <td>
                        .params</td>
                        <td>Object = { id: 255, m: hello }</td>
                        <td>.path</td>
                      <td>/dir/index.html</td>
                    </tr>
                    <tr>
                        <td>
                        .segments</td>
                        <td>Array = ['dir', 'index.html']</td>
                        <td>.port</td>
                      <td>8080</td>
                    </tr>
                    <tr>
                        <td>
                      .protocol</td>
                        <td>http</td>
                        <td>.source</td>
                      <td>http://abc.com:8080/dir/index.html?id=255&amp;m=hello#top</td>
                    </tr>
                </table>
                
            </dd>

            <dt> Mo.write( html ) </dt>
            <dd>

                <p>直接输出内容到页面。</p>

                <blockquote>
                    <p> <strong>html</strong>  HTML 字符串</p>
                </blockquote>

                <pre>Mo.write("abc");</pre>

                <p>
                    <script>Mo.write( "abc" );</script>
                </p>
                
                <p>连续输出多个内容块。</p>
                
                <pre>Mo.write( "abc", "def" );</pre>

                <p>
                    <script>Mo.write( "abc", "def" );</script>
                </p>
            </dd>

            <dt> Mo.script( src[, attr, func, target] ) </dt>
            <dd>				

                <p>加载 JavaScript 到文档或指定元素中。</p>

                <blockquote>
                    <p> <strong>src</strong>  文件名称或地址，Mo.js API 请直接使用短标识</p>
                    <p> <strong>attr</strong>  属性集合，{ "abc" : "def" } 形式，可以多个</p>
                    <p> <strong>func</strong>  回调函数</p>
                    <p> <strong>target</strong>  插入到目标元素上，默认为 &lt;head&gt;</p>
                </blockquote>

                <pre>Mo.script( "script.js", { "charset" : "utf-8" }, function(){ test() } );</pre>

                <p><button type="button" id="btn_script">测试</button></p>

                <p id="script"></p>
                
                <p>加载 Mo API 到文档，请使用其标识，例如加载 mo.drag.js，则为 drag 。</p>
                
                <pre>Mo.script( "drag", {}, function(){ new Mo.Drag( Mo("#drag img").item(0) ); } );</pre>

                <p><button type="button" id="btn_api">测试</button> <strong id="msg"></strong> </p>

                <p id="drag"> <img src="res/images/web20.jpg" style="position:relative;" /> </p>

            </dd>

            <dt> Mo.json( src, attr, func ) </dt>
            <dd>				

                <p>加载 JavaScript 到文档或指定元素中。</p>

                <blockquote>
                    <p> <strong>src</strong>  文件名称或地址，Mo.js API 请直接使用短标识</p>
                    <p> <strong>attr</strong>  属性集合，{ "abc" : "def" } 形式，可以多个</p>
                    <p> <strong>func</strong>  回调函数</p>
                </blockquote>
                
                <p>func 可接受参数</p>

                <blockquote>
                    <p> <strong>data</strong>  JSON 数据</p>
                </blockquote>

                <pre>Mo.json( "json.php?callback=?", { "charset" : "utf-8" }, function( data ){ alert( data ); } );</pre>

                <p><button type="button" id="btn_json">测试</button></p>

                <p id="json"></p>

            </dd>

            <dt> Mo.date( format[, datetime] ) </dt>
            <dd>

                <p>返回格式化后的日期。</p>

                <blockquote>
                    <p> <strong>format</strong>  字符串形式</p>
                    <p> <strong>datetime</strong>  时间对象，默认为当前时间</p>
                </blockquote>
                
                <p>format 取值参考，以 2011/9/6 2:1:5 为例</p>
                
                <table border="0"cellpadding="0" cellspacing="1">
                    <thead>
                    <tr>
                        <td width="25%">属性：</td>
                        <td width="25%">值：</td>
                        <td width="25%">属性：</td>
                        <td width="25%">值：</td>
                    </tr>
                    </thead>
                    <tr>
						<td>y</td>
						<td>完整年份，如：2011</td>
						<td>yy</td>
						<td>短年份，如：11</td>
                    </tr>
                    <tr>
						<td>m</td>
						<td>完整月份，如：09</td>
						<td>mm</td>
						<td>短月份，如：9</td>
                    </tr>
                    <tr>
						<td>d</td>
						<td>完整日期，如：06</td>
						<td>dd</td>
						<td>短日期，如：6</td>
                    </tr>
                    <tr>
						<td>h</td>
						<td>完整小时，如：02</td>
						<td>hh</td>
						<td>短小时，如：2</td>
                    </tr>
                    <tr>
						<td>i</td>
						<td>完整分钟，如：01</td>
						<td>ii</td>
						<td>短分钟，如：1</td>
                    </tr>
                    <tr>
						<td>s</td>
						<td>完整秒钟，如：05</td>
						<td>ss</td>
						<td>短秒钟，如：5</td>
                    </tr>
                </table>

<pre>Mo.write( Mo.date("y-m-d") );</pre>

                <p>
                    <script>Mo.write( Mo.date("y-m-d") );</script>
                </p>

                <pre>Mo.write( Mo.date( "y-m-d", 1328029261 ) );</pre>

                <p>
                    <script>Mo.write( Mo.date( "y-m-d", 1328029261 ) );</script>
                </p>

            </dd>
            
            <dt> Mo.find( selector[, context] ) </dt>
            <dd>

                <p>Mo 选择器，返回匹配的页面元素，如果找到匹配元素则返回 array，否则返回 false。</p>

                <blockquote>
                    <p> <strong>selector</strong>  选择器表达式</p>
                    <p> <strong>context</strong>  基准对象，默认为 document</p>
                </blockquote>

                <pre>Mo.write( Mo.find( "#build" )[0].tagName );</pre>

                <p>
                    <script>Mo.write( Mo.find( "#build" )[0].tagName );</script>
                </p>

            </dd>
            
            <dt> Mo.create( tag[, attr] ) </dt>
            <dd>

                <p>元素创建工具，返回新创建的元素对象。</p>

                <blockquote>
                    <p> <strong>tag</strong>  标签名称</p>
                    <p> <strong>attr</strong>  属性集合，{ "abc" : "def" } 形式，可以多个</p>
                </blockquote>
                
                <pre>Mo.create( "div", { "id" : "element", "innerHTML" : "New Element" } );</pre>

                <p>
                    <script>Mo.write( Mo.create( "div", { "id" : "element", "innerHTML" : "New Element" } ) );</script>
                </p>

            </dd>
            
            <dt> Mo.extend( func ) </dt>
            <dd>

                <p>扩展 Mo 选择器方法。</p>

                <blockquote>
                    <p> <strong>func</strong>  方法集合，{ "abc" : "def" } 形式，可以多个</p>
                </blockquote>

                <pre>Mo.extend( { 'read' : function(){ alert( this.self[0].innerHTML ); } } );</pre>
                
                <p>支持串联方法。</p>
                
                <pre>Mo.extend( { 'read' : function(){ alert( this.self[0].innerHTML ); <em>return this;</em> } } );</pre>

                <p>
                    <script>
                    
                        //Mo.extend( { 'read' : function(){ alert( this.self[0].innerHTML ); return this; } } );
                        
                        //Mo("#build").read();
                        
                        //Mo("#build").read().html('xxxxxxxxxx');
                    
                    </script>
                </p>

            </dd>

        </dl>

        <script type="text/javascript">

        /************* 页面载入 测试 ****************/
        
        Mo.ready( function(time){ Mo("#ready").html('我很努力的把 DOM 加载好了，共耗时'+time+'毫秒！'); } );
        
        Mo.reader(function( time ){ Mo("#reader").html( Mo("#reader").html() + '<br />我花了'+time+'毫秒，终于把页面加载好了！'); });

        Mo.resize(function(){ Mo("#resize").html('页面尺寸发生变化了！'); });

        /************* 浏览器信息 测试 ****************/

        Mo("#browser").html( "客户端名称：" + Mo.Browser.name + " 版本：" + Mo.Browser.version +  " 语言：" + Mo.Browser.lang + ( Mo.Browser.maxthon ? "傲游浏览器（ Ver:"+ Mo.Browser.maxthon.version +"）路过！" : "" ) + ( Mo.Browser.mobile ? "移动设备" : "" ) );	

        /************* 事件绑定 测试 ****************/

        Mo("#bind").bind('click',function(){ Mo("#bind_box").html("你点了我一下！");  Mo("#bind").unbind('click').html('click').disabled() });

        /************* 随机字符 测试 ****************/

        Mo("#random").bind('click',function(){
            Mo("#random_box").html( Mo.random(40) ).style({"color":"red","fontSize":"20px"});
        });

        Mo("#between").bind('click',function(){
            Mo("#between_box").html( Mo.between(40,100) );
        });

        /************* 加载JSON 测试 ****************/

        Mo("#btn_json").bind('click',function(){
            Mo.json( "http://www.veryide.com/projects/mojs/json.php?callback=?" , {}, function( data ){ Mo("#json").html( data.html ); } );
        });

        /************* 加载JS 测试 ****************/

        Mo("#btn_script").bind('click',function(){
            Mo.script( "script.js?"+Mo.random(10) , { "charset" : "utf-8" }, function(){ test() } );
        });
        
        Mo("#btn_api").bind('click',function( index, event ){
        
            Mo.script( "drag", {} , function(){
            
                Mo("#msg").html("下图可拖动：");
                
                Mo("#drag img").style( { "border" : "#999 dotted 2px" } );
                
                new Mo.Drag( Mo("#drag img").item(0) );
                
            });
        });

        /************* Cookie 测试 ****************/

        Mo("#cookie").bind('click',function(){
            Mo.cookie("test","Hi！欢迎使用Mo。");
            Mo("#cookie_box").html("我已经保存了！");
        });

        Mo("#cookie_read").bind('click',function(){
            if( Mo.cookie("test") ){
                Mo("#cookie_box").html( Mo.cookie("test") );
            }else{
                Mo("#cookie_box").html("没有内容！");
            }
        });

        /************* URL参数 测试 ****************/

        Mo("#url_action").bind('click',function(){
            Mo("#url_result").value( Mo.get("key",Mo("#url_source").value()) );
        });

        </script>

    </div>

    <div id="footer">

        Copyright &copy; 2011 <a href="http://www.veryide.com">VeryIDE</a> <span>|</span><a href="http://www.veryide.com/projects/">Projects</a> <span>|</span> <a href="http://www.veryide.com/projects/mojs/">Mo.js</a> <span>|</span> <a href="packer.html">Packer</a> <span>|</span> <a href="regex.html">Regex</a>

    </div>
            
    <p style="display:none;">
        <script language="javascript" type="text/javascript" src="http://js.users.51.la/960393.js"></script>
    </p>
            
</body>
</html>